<template>
    <div id="container" class="container"></div>
</template>
<script setup lang="ts">
import { Game, AUTO, Scale } from "phaser";
import { Preloader } from "./ts/Preloader";
import { Main } from "./ts/Main";
import { End } from "./ts/End";
import { onMounted, onUnmounted } from "vue";

let game: Game;

onMounted(() => {
    game = new Game({
        parent: "container",
        type: AUTO,
        width: 288,
        height: 505,
        scale: {
            mode: Scale.FIT,
        },
        backgroundColor: 0xffffff,
        physics: {
            default: "arcade",
            arcade: {
                gravity: { x: 0, y: 600 },
                debug: false,
            },
        },
        scene: [Preloader, Main, End],
    });
});

onUnmounted(() => {
    game.destroy(true);
});
</script>
<style scoped>
.container {
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
